<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="UTF-8">

<link href="${pageContext.request.contextPath}/jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="${pageContext.request.contextPath}/jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="${pageContext.request.contextPath}/jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>

<script type="text/javascript">
	/**
	 * 创建活动
	 */
	$(function(){
		// 手动打开创建活动modal
		$("#createActivityBut").click(function () {
			$("#createActivityModal").modal("show");
			// 异步加载员工数据进来
			$.post("${pageContext.request.contextPath}/user/getAllUser.action",function (userList) {
				var $owner = $("#create-marketActivityOwner");
				// 清空一下 防止重复加进去
				$owner.empty();
				$.each(userList,function (i,user) {
					$owner.append("<option value='" + user.userId + "'>" + user.userName + "</option>");
				});
			},"json");
		});
		// 异步获得新建活动数据传到后台
		$("#saveActivityBut").click(function () {
			// 序列化获取form数据
			var $createForm = $("#createForm").serialize();
			var activityOwner = $("#create-marketActivityOwner").val();
			var activityName = $("#create-marketActivityName").val();
			var activityStartDate = $("#create-startTime").val();
			var activityEndDate = $("#create-endTime").val();
			var activityCost = $("#create-cost").val();
			var activityDescription = $("#create-describe").val();
			var data = {"activityOwner":activityOwner,
						"activityName":activityName,
						"activityStartDate":activityStartDate,
						"activityEndDate":activityEndDate,
						"activityCost":activityCost,
						"activityDescription": activityDescription};
			$.post("${pageContext.request.contextPath}/activity/saveActivity.action",$createForm,function (message) {
				getAllActivity(1);
				alert(message, messageStr);
			},"json");
			// 关闭modal
			$("#createActivityModal").modal("hide");
		});
	});
</script>
<script>
	// 定义全局变量保存pageNum
	var pNum;

	/**
	 * 展示活动数据
	 */
	function getAllActivity(pageNum){
		// 得到更新后的pageSize
		var pageSize = $("#selectPageSize").text();
		// 得到模糊查询的数据
		var activityLikeName = $("#activityLikeName").val();
		var activityLikeOwner = $("#activityLikeOwner").val();
		var activityLikeStartTime = $("#activityLikeStartTime").val();
		var activityLikeEndTime = $("#activityLikeEndTime").val();

		// 传值
		var data = {"pageNum":pageNum,"pageSize":pageSize,"activityLikeName":activityLikeName, "activityLikeOwner":activityLikeOwner,
			"activityLikeStartTime":activityLikeStartTime,"activityLikeEndTime":activityLikeEndTime};
		$.post("${pageContext.request.contextPath}/activity/getActivityByPage.action",data,function (pageInfo) {
			// pNum赋值
			pNum = pageInfo.pageNum;
			// 展示总条数
			$("#showTotal").html(pageInfo.total);
			// 每次请求清空 不然重复添加
			var $showActivity = $("#showActivity");
			$showActivity.empty();
			// 遍历pageInfo里面的 活动list 放入
			$.each(pageInfo.list,function (i,activity) {
				// 每次遍历清空
				var htmlStr = "";
				// 用户id改成用户名字 先查询
				// 传入activityOwner取数据库查找userName
				$.post("${pageContext.request.contextPath}/user/getUsersById.action","activityOwner="+activity.activityOwner,function (user) {
					htmlStr += "<tr class='active'>";
					htmlStr += "<td><input class='activityCheckbox' type='checkbox' value='" + activity.activityId + "' />" + activity.activityId + "</td>";
					htmlStr += "<td><a style='text-decoration: none; cursor: pointer;'>" + activity.activityName + "</a></td>";
					htmlStr += "<td>" + user.userName + "</td>";
					htmlStr += "<td>" + activity.activityStartDate + "</td>";
					htmlStr += "<td>" + activity.activityEndDate + "</td>";
					htmlStr += "</tr>";
					// 拿到pageInfo数据append到页面
					$showActivity.append(htmlStr);
				},"json");
			});

			/**
			 * 页码导航
			 */
			var $showNavigates = $("#showNavigates");
			$showNavigates.empty();
			var htmlStr = "";
			// 是否是第一页	 disabled不可点
			if (pageInfo.isFirstPage) {
				htmlStr += "<li class='disabled'><a href='#'>首页</a></li>"
			}else {
				htmlStr += "<li><a href='javascript:getAllActivity(1)'>首页</a></li>"
			}
			//是否有上一页
			if (pageInfo.hasPreviousPage) {
				htmlStr += "<li><a href='javascript:getAllActivity(" + pageInfo.prePage + ")'>上一页</a></li>";
			}else{
				htmlStr += "<li class='disabled'><a href='#'>上一页</a></li>"
			}
			// 循环加入页码 		从页码的开始遍历
			for (var i = pageInfo.navigateFirstPage; i <= pageInfo.navigateLastPage; i++) {
				// 当前页高亮
				if (pageInfo.pageNum === i){
					// 添加点击加载异步方法
					// 给当前页加上id属性获取pageNum
					htmlStr += "<li class='active'><a id='getPageNum' href='javascript:getAllActivity(" + i + ")'>" + i + "</a></li>";
				}else {
					htmlStr += "<li><a href='javascript:getAllActivity(" + i + ")'>" + i + "</a></li>"
				}
			}
			// 是否有下一页
			if (pageInfo.hasNextPage) {
				htmlStr += "<li><a href='javascript:getAllActivity(" + pageInfo.nextPage + ")'>下一页</a></li>";
			}else{
				htmlStr += "<li class='disabled'><a href='#'>下一页</a></li>"
			}
			// 是否是末页
			if (pageInfo.isLastPage) {
				htmlStr += "<li class='disabled'><a href='#'>末页</a></li>"
			}else {
				htmlStr += "<li><a href='javascript:getAllActivity(" + pageInfo.pages + ")'>末页</a></li>";
			}
			//添加到页面
			$showNavigates.append(htmlStr);
		},"json");
	}

	$(function () {
		// 封装异步查询 进入页面就加载 加载第一页
		getAllActivity(1);
		// 更新pageSize异步发给后台
		$("#updatePageSize").click(function () {
			getAllActivity(1)
		});
		// 模糊查询名
		$("#activityLikeBut").click(function () {
			getAllActivity(1);
		});
	});
	// 得到选择的pageSize
	function setPageSize(pageSize){
		$("#selectPageSize").html(pageSize);
	}
</script>
<script>
	/**
	 * 删除
	 */
	$(function () {
		// 全选全不选
		var $selectActivityBatch = $("#selectActivityBatch");
		$selectActivityBatch.click(function () {
			$(".activityCheckbox").prop("checked", $selectActivityBatch.prop("checked"));
		});

		// 选中的异步删除
		$("#deleteActivityBut").click(function () {
			// 选中的对象
			var $activityCheckbox = $(".activityCheckbox:checked");
			if ($activityCheckbox.length === 0) {
				alert("请选择要删除的数据");
				return;
			}
			// 追加删除确认
			if (confirm("确认删除吗？")) {
				// 遍历 得到其value 遍历会变成js对象不能用jquery
				// 拼接成字符串
				var idStr = "";
				$.each($activityCheckbox,function (i,n) {
					idStr += $(n).val() + ",";
				});
				$.post("${pageContext.request.contextPath}/activity/deleteActivityBatch.action","idStr="+idStr,function (message) {
					if (message.messageCode === 8) {
						// 第一种
						/*var pageNum = $("#getPageNum").text();
						getAllActivity(pageNum);*/
						// 第二种	用全局变量
						getAllActivity(pNum);
					}else{
						alert(message.messageStr);
					}
				},"json");
			}

		});

	})
</script>
<script>
	/**
	 * 修改
	 */
	$(function () {

		$("#editActivityBut").click(function () {
			var $activityCheckbox = $(".activityCheckbox:checked");
			if ($activityCheckbox.length !== 1) {
				alert("修改必须且只能选择一个");
				return;
			}
			var activityId = $activityCheckbox.val();
			// 数据回显
			$.post("${pageContext.request.contextPath}/activity/showActivity.action","activityId="+activityId,function (activtity) {
				// 异步加载员工数据进来	要提前加载
				$.post("${pageContext.request.contextPath}/user/getAllUser.action",function (userList) {
					var $owner = $("#edit-marketActivityOwner");
					$owner.empty();
					$.each(userList,function (i,user) {
						// 不能用=== 要用==模糊比较 或者用parseInt转成number
						if (user.userId === parseInt(activtity.activityOwner)) {
							$owner.append("<option value='" + user.userId + "' selected='selected'>" + user.userName + "</option>");
						} else {
							$owner.append("<option value='" + user.userId + "'>" + user.userName + "</option>");
						}
					});
					$("#edit-marketActivityName").val(activtity.activityName);
					$("#edit-startTime").val(activtity.activityStartDate);
					$("#edit-endTime").val(activtity.activityEndDate);
					$("#edit-cost").val(activtity.activityCost);
					$("#edit-describe").val(activtity.activityDescription);
					$("#edit-activityId").val(activtity.activityId);
				},"json");
			},"json");
            $("#editActivityModal").modal("show");
		});

		// 点击更新  别写错位置啊
		$("#updateActivityBut").click(function () {
			var editForm = $("#editForm").serialize();
			// 直接传不能拼接
			$.post("${pageContext.request.contextPath}/activity/updateActivity.action",editForm,function (message) {
				if (message.messageCode === 4){
					$("#editActivityModal").modal("hide");
					getAllActivity(pNum);
				}else {
					alert(messageStr);
				}
			},"json");

		});
	});
</script>

</head>
<body>
	<!-- 创建市场活动的模态窗口 -->
	<div class="modal fade" id="createActivityModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 85%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel1">创建市场活动</h4>
				</div>
				<div class="modal-body">
					<form id="createForm" class="form-horizontal" role="form">
						<div class="form-group">
							<label for="create-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="create-marketActivityOwner" name="activityOwner">
								</select>
							</div>
                            <label for="create-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="create-marketActivityName" name="activityName">
                            </div>
						</div>
						
						<div class="form-group">
							<label for="create-startTime" class="col-sm-2 control-label">开始日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control datePlugin" id="create-startTime" name="activityStartDate">
							</div>
							<label for="create-endTime" class="col-sm-2 control-label">结束日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control datePlugin" id="create-endTime" name="activityEndDate">
							</div>
							<%--<script>
								$('#create-endTime').datetimepicker({
									forceParse: 0,//设置为0，时间不会跳转1899，会显示当前时间。
									language: 'zh-CN',//显示中文
									format: 'yyyy-mm-dd',//显示格式
									minView: "month",//设置只显示到月份
									initialDate: new Date(),//初始化当前日期
									autoclose: true,//选中自动关闭
									todayBtn: true,//显示今日按钮
									clearBtn:true//是否显示清空按钮
								})
								// $("#create-endTime").datetimepicker("setDate", new Date() );  //设置显示默认当天的时间
							</script>--%>
						</div>
                        <div class="form-group">

                            <label for="create-cost" class="col-sm-2 control-label">成本</label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="create-cost" name="activityCost">
                            </div>
                        </div>
						<div class="form-group">
							<label for="create-describe" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-10" style="width: 81%;">
								<textarea class="form-control" rows="3" id="create-describe" name="activityDescription"></textarea>
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button id="saveActivityBut" type="button" class="btn btn-primary">保存</button>
				</div>
			</div>
		</div>
	</div>
	
	<!-- 修改市场活动的模态窗口 -->
	<div class="modal fade" id="editActivityModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 85%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel2">修改市场活动</h4>
				</div>
				<div class="modal-body">
					<form id="editForm" class="form-horizontal" role="form">
						<%-- 隐式传值activityId --%>
						<input type="hidden" id="edit-activityId" name="activityId" value="">
						<div class="form-group">
							<label for="edit-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="edit-marketActivityOwner" name="activityOwner">
								</select>
							</div>
                            <label for="edit-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="edit-marketActivityName" name="activityName" value="">
                            </div>
						</div>

						<div class="form-group">
							<label for="edit-startTime" class="col-sm-2 control-label">开始日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control datePlugin" id="edit-startTime" name="activityStartDate" value="">
							</div>
							<label for="edit-endTime" class="col-sm-2 control-label">结束日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control datePlugin" id="edit-endTime" name="activityEndDate" value="">
							</div>
						</div>
						<%-- 一定要写在后面 按顺序加载页面的 --%>
						<script>
							$('.datePlugin').datetimepicker({
								forceParse: 0,//设置为0，时间不会跳转1899，会显示当前时间。
								language: 'zh-CN',//显示中文
								format: 'yyyy-mm-dd',//显示格式
								minView: "month",//设置只显示到月份
								initialDate: new Date(),//初始化当前日期
								autoclose: true,//选中自动关闭
								todayBtn: true,//显示今日按钮
								clearBtn:true//是否显示清空按钮
							})
							// $("#create-startTime").datetimepicker("setDate", new Date() );  //设置显示默认当天的时间
						</script>
						<div class="form-group">
							<label for="edit-cost" class="col-sm-2 control-label">成本</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-cost" name="activityCost" value="">
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit-describe" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-10" style="width: 81%;">
								<textarea class="form-control" rows="3" id="edit-describe" name="activityDescription"></textarea>
							</div>
						</div>
					</form>
					
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button id="updateActivityBut" type="button" class="btn btn-primary">更新</button>
				</div>
			</div>
		</div>
	</div>

	<!-- 导入市场活动的模态窗口 -->
	<div class="modal fade" id="importActivityModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 85%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">导入市场活动</h4>
				</div>
				<div class="modal-body" style="height: 350px;">
					<div style="position: relative;top: 20px; left: 50px;">
						请选择要上传的文件：<small style="color: gray;">[仅支持.xls]</small>
					</div>
					<div style="position: relative;top: 40px; left: 50px;">
						<input type="file" id="activityFile">
					</div>
					<div style="position: relative; width: 400px; height: 320px; left: 45% ; top: -40px;" >
						<h3>重要提示</h3>
						<ul>
							<li>操作仅针对Excel，仅支持后缀名为XLS的文件。</li>
							<li>给定文件的第一行将视为字段名。</li>
							<li>请确认您的文件大小不超过5MB。</li>
							<li>日期值以文本形式保存，必须符合yyyy-MM-dd格式。</li>
							<li>日期时间以文本形式保存，必须符合yyyy-MM-dd HH:mm:ss的格式。</li>
							<li>默认情况下，字符编码是UTF-8 (统一码)，请确保您导入的文件使用的是正确的字符编码方式。</li>
							<li>建议您在导入真实数据之前用测试文件测试文件导入功能。</li>
						</ul>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button id="importActivityBtn" type="button" class="btn btn-primary">导入</button>
				</div>
			</div>
		</div>
	</div>
	
	<div>
		<div style="position: relative; left: 10px; top: -10px;">
			<div class="page-header">
				<h3>市场活动列表</h3>
			</div>
		</div>
	</div>
	<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
		<div style="width: 100%; position: absolute;top: 5px; left: 10px;">
		
			<div class="btn-toolbar" role="toolbar" style="height: 80px;">
				<form id="formLikeData" class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">名称</div>
				      <input id="activityLikeName" name="activityLikeName" class="form-control" type="text">
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">所有者</div>
				      <input id="activityLikeOwner" name="activityLikeOwner" class="form-control" type="text">
				    </div>
				  </div>


				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">开始日期</div>
					  <input id="activityLikeStartTime" name="activityLikeStartTime" class="form-control" type="text" />
				    </div>
				  </div>
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">结束日期</div>
					  <input id="activityLikeEndTime" name="activityLikeEndTime" class="form-control" type="text">
				    </div>
				  </div>
				  
				  <button id="activityLikeBut" type="button" class="btn btn-default">查询</button>
				  
				</form>
			</div>
			<div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
				<div class="btn-group" style="position: relative; top: 18%;">
				  <button id="createActivityBut" type="button" class="btn btn-primary" data-toggle="modal"><span class="glyphicon glyphicon-plus"></span> 创建</button>
				  <button id="editActivityBut" type="button" class="btn btn-default" data-toggle="modal"><span class="glyphicon glyphicon-pencil"></span> 修改</button>
				  <button id="deleteActivityBut" type="button" class="btn btn-danger"><span class="glyphicon glyphicon-minus"></span> 删除</button>
				</div>
				<%-- 文件导出导入 --%>
				<div class="btn-group" style="position: relative; top: 18%;">
					<button type="button" class="btn btn-default" data-toggle="modal" data-target="#importActivityModal" ><span class="glyphicon glyphicon-import"></span> 上传列表数据（导入）</button>
					<button id="exportActivityAllBtn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-export"></span> 下载列表数据（批量导出）</button>
					<button id="exportActivityXzBtn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-export"></span> 下载列表数据（选择导出）</button>
				</div>
				<script>
					$(function () {
						$("#exportActivityAllBtn").click(function () {
							window.location.href = "${pageContext.request.contextPath}/activity/exportAllActivity.action"
						});
					})
				</script>
			</div>
			<div style="position: relative;top: 10px;">
				<table class="table table-hover">
					<thead>
						<tr style="color: #B3B3B3;">
							<td><input id="selectActivityBatch" type="checkbox" /></td>
							<td>名称</td>
                            <td>所有者</td>
							<td>开始日期</td>
							<td>结束日期</td>
						</tr>
					</thead>
					<tbody id="showActivity">
					</tbody>
				</table>
			</div>
			
			<div style="height: 50px; position: relative;top: 30px;">
				<div>
					<button type="button" class="btn btn-default" style="cursor: default;">共<b id="showTotal">50</b>条记录</button>
				</div>
				<div class="btn-group" style="position: relative;top: -34px; left: 110px;">
					<button id="updatePageSize" type="button" class="btn btn-default" style="cursor: default;">显示</button>
					<div class="btn-group">
						<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
							<span id="selectPageSize">5</span>
							<span class="caret"></span>
						</button>
						<ul id="preparePageSize" class="dropdown-menu" role="menu">
							<li><a href="javascript:setPageSize(5)">5</a></li>
							<li><a href="javascript:setPageSize(10)">10</a></li>
							<li><a href="javascript:setPageSize(20)">20</a></li>
							<li><a href="javascript:setPageSize(30)">30</a></li>
						</ul>
					</div>
					<button type="button" class="btn btn-default" style="cursor: default;">条/页</button>
				</div>
				<div style="position: relative;top: -88px; left: 285px;">
					<nav>
						<ul class="pagination" id="showNavigates">
						</ul>
					</nav>
				</div>
			</div>
			
		</div>
		
	</div>
</body>
</html>